import React from 'react';
import { Settings, Globe, Sliders } from 'lucide-react';
import { useSettings } from '@/contexts/setting';
import { SettingTabType } from '@/types/setting';

/**
 * 设置标签页组件
 * 用于切换不同的设置类别
 */
const SettingTabs: React.FC = () => {
  const { state, setActiveTab } = useSettings();
  const { activeTab } = state;

  // 标签页配置
  const tabs = [
    {
      id: SettingTabType.MODEL,
      label: '模型设置',
      icon: <Settings className="h-4 w-4 mr-2" />,
      disabled: false
    },
    {
      id: SettingTabType.GENERAL,
      label: '通用设置',
      icon: <Globe className="h-4 w-4 mr-2" />,
      disabled: true
    },
    {
      id: SettingTabType.ADVANCED,
      label: '高级设置',
      icon: <Sliders className="h-4 w-4 mr-2" />,
      disabled: true
    }
  ];

  return (
    <div className="flex border-b">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => !tab.disabled && setActiveTab(tab.id)}
          className={`
            flex items-center px-4 py-3 text-sm font-medium transition-colors
            ${activeTab === tab.id 
              ? 'border-b-2 border-primary text-primary' 
              : 'text-muted-foreground hover:text-foreground'}
            ${tab.disabled 
              ? 'opacity-50 cursor-not-allowed' 
              : 'cursor-pointer'}
          `}
          disabled={tab.disabled}
          aria-selected={activeTab === tab.id}
          role="tab"
        >
          {tab.icon}
          {tab.label}
          {tab.disabled && <span className="ml-2 text-xs">(即将推出)</span>}
        </button>
      ))}
    </div>
  );
};

export default SettingTabs;
